<html>
	<head>
		<link rel="stylesheet" href="style.css" />
		<link rel="stylesheet" type="text/css" href="/site_media/css/base.css"/>
		<link rel="stylesheet" type="text/css" href="/site_media/css/form.css"/>
		<link rel="stylesheet" type="text/css" href="/site_media/css/ddlevelsmenu-base.css" />
		<link rel="stylesheet" type="text/css" href="/site_media/css/ddlevelsmenu-topbar.css" />
		<link rel="stylesheet" type="text/css" href="/site_media/css/ddlevelsmenu-sidebar.css" />
		<title>SEARCH by Category </title>
	</head>
	<body id="container" onLoad="document.getElementById('{{scroll}}').onclick();">
		<script src="http://www.google.com/jsapi"></script>
		<script>
		   google.load("jquery", "1.3.2");
		</script>
		<script>
			var old_tools = new Array();
			var old_skills = new Array();
			var old_tags = new Array();

			var old_cats = new Array();
			var scrollTag='';

			{% if category.id %}
			var c = {{category.id}};
			{% else %}
			var c = 0;
			{% endif %}

			{% for x in old_categories %}
			old_cats.push({{x}});
			{% endfor %}
			{% for x in old_tools %}
			old_tools.push({{x}});
			{% endfor %}
			{% for x in old_skills %}
			old_skills.push({{x}});
			{% endfor %}
			{% for x in old_tags %}
			old_tags.push({{x}});
			{% endfor %}

			function show_array(_array, _old_array, _old_array_name, _html_id, prefix){
				var _html = ''; // tool
				for (var i=0;i<_array.length;i++){
					if (_array[2*i]){
						_html += "<input type='checkbox' value ='"+_array[2*i]+"' onmousedown=\"show_skt("
							+ _array[i*2]+",'" + _array[i*2+1] + "', "+_old_array_name+",'"+ prefix +"');\"";
						for (var j = 0;j<_old_array.length; j++){
							if (_old_array[j] == _array[i*2])
								_html += " checked='true' ";
						}
						_html += ">" + _array[i*2+1] + "<br/>";
					}
				}
				document.getElementById(_html_id).innerHTML = _html;
			}

			/*Show all the skills, tools and tags grouped by categories.*/
			function show_skill_tool_tag(c_id,tools, skills, tags){
				c = c_id;
				show_array(tools, old_tools, 'old_tools','_tools', 't');
				show_array(skills, old_skills, 'old_skills','_skills', 's');
				show_array(tags, old_tags, 'old_tags','_tags','');
			}

			/* Process with click on categories.*/
			function show_skt(_id, _name, _array, prefix){
				for(i=0;i<_array.length;i++){
					if (_id==_array[i]){
						_remove(_id,_array);
						jump_url();
						return ;
					}
				}

				scrollTag = prefix + _id;
				_array.push(_id);

				jump_url();
			}

			/* Process with unselect. */
			function _remove(_id, _array){
				for (i=0;i<_array.length;i++){
					if (_array[i]==_id){
						_array[i] = _array[_array.length - 1];
						_array.pop();
					}
				}
			}

			/* Process with select. */
			function push(_array, val){
				for (var i=0;i<_array.length;i++){
					if (_array[i]==val)
						return;
				}

				_array.push(val);
			}

			function select_cat(val){
				c = val;
				push(old_cats, val);
				jump_url();
			}

			function unselect_cat(val){
				c = val;
				_remove(val, old_cats);
				jump_url();
			}

			/* Jump to the new search URL. */
			function jump_url(){
				var _url = '';
				_url += '?c=' + c;
				_url += '&scroll=' + scrollTag;
				_url += get_array_url(old_tools, 't');
				_url += get_array_url(old_skills, 's');
				_url += get_array_url(old_tags, 'tag');
				_url += get_array_url(old_cats, 'cat');

				window.location.href = _url;
			}

			function get_array_url(_array, url_string){
				var temp = "";
				for (i=0;i<_array.length;i++){
					temp += '&' + url_string + i + '=' + _array[i];
				}

				return temp;
			}

			/* Unselect all the tools, skills, tags belong to a category. */
			function uncheck_all(c_id,tools, skills, tags){
				for (var i=0;i<skills.length/2;i++){
					_remove(skills[i*2], old_skills);
				}

				for (var i=0;i<tools.length/2;i++){
					_remove(tools[i*2], old_tools);
				}

				for (var i=0;i<tags.length/2;i++){
					_remove(tags[i*2], old_tags);
				}

				c = c_id;
			}

			// Submit the selected artists and close the sub window.
			function select_artist(){
				var s_a = "";
				var artists = new Array();;
				{% for art in artists %}
				artists.push("{{art.id}}");
				artists.push("{{art.first_name}}, {{art.last_name}}");
				{% endfor %}

				var es = document.getElementsByName("select_artist");
                for (i = 0; i < es.length; i++)
                {
                    if (es[i].checked == true){
						var str = "";
						for(j=0;j<artists.length;j++){
							if (artists[j]==es[i].value){
								str = artists[j+1];
								break;
							}
						}
						s_a += "<input name='artists' type='checkbox' value='" + es[i].value+ "' checked/> "+ str+"<br>";
					}
                }

				opener.document.getElementById('select_artist').innerHTML = s_a;
				window.close();
			}
			
			function add(id, name){				
				s_a = "<input name='artists' type='checkbox' value='" + id + "' checked/> "+ name+"<br>";
				
				if (opener.document.getElementById('select_artist').innerHTML.indexOf(name) < 0 )
					opener.document.getElementById('select_artist').innerHTML += s_a;
				$("#button"+id).remove();				
			}
		</script>

	<div id="content" style="position:absolute; top:20px; left:0px; width:610px; height:relative; background-color: #1A1A1A; layer-background-color: #1A1A1A; border: 1px none #000000;">
    <table width="610">
<tr>
	<td colspan="2"><span style="font-size:14px;color:#CCC">Select artist by category</span><br></br></td>
		</tr>
  
<tr><td>
<div style="WIDTH:290px;HEIGHT:260px;word-wrap:break-word;OVERFLOW:auto;overflow-x:hidden;border:1px solid #7e7d68;top:40px;scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF;scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222;scrollbar-arrow-color: #222222">
				<div style="position:relative;left:5px;top:5px;">
            <b>Categories</b><br/>
			{% for x in skts %}
					<input type="checkbox" name="c_a_t_radio" value="{{x.category.id}}"
						   onmousedown="if(this.checked) {
							   uncheck_all({{x.category.id}},[{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
							   [{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
							   [{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);
							   unselect_cat({{x.category.id}});
						   }else
							   select_cat({{x.category.id}});"
						   {% if x.category.id in old_cats %} checked="true" />
			      <a href="#" onClick="show_skill_tool_tag({{x.category.id}},[{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
							   [{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
						   [{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);">
				  {{x.category.name}}</a>
			{% else %}
			{% if x.category.id in old_categories %} checked="true" />
					<a href="#" onClick="show_skill_tool_tag({{x.category.id}},[{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
					[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
					[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);">
						{{x.category.name}}
				  </a>
			{% else %}
				 />
					<a href="#" onClick="show_skill_tool_tag({{x.category.id}},[{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
					[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
					[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);">
					{{x.category.name}}
					</a>
			{% endif %}
			{% endif %}
					<br/>
			{% endfor %}
				</div>
			</div>
</td><td>
			<div style="position:absolute; left:300px; top:40px; WIDTH:290px; HEIGHT:260px; word-wrap:break-word; OVERFLOW:auto; overflow-x:hidden; border:1px solid #7e7d68; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
				<div style="position:relative;left:5px;top:5px;">
					<b>Skills</b><br/>
                    
                  <div id="_skills">
				{% for x in skts %}

				{% if x.category.id == category.id %}
				{% for y in x.skills %}

					<input type="checkbox" value="{{y.id}}" name="new_skills"
							   {% if y.id in old_skills %}
				checked ="true"
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_skills, 's');" />&nbsp;{{y.name}}
<br/>
				{% else %}
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_skills, 's');">&nbsp;{{y.name}}
<br/>
				{% endif %}
				{% endfor %}
				{% endif %}
				{% endfor %}
				  </div>
				</div> <br/>

				<div style="position:relative;left:5px;top:5px;">
					<b>Tools</b><br/>
					<div id="_tools">
				{% for x in skts %}
				{% if x.category.id == category.id %}
				{% for y in x.tools %}
						<input type="checkbox" value="{{y.id}}" name="new_tools"
							   {% if y.id in old_tools %}
				checked ="true"
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_tools,'t');">&nbsp;{{y.name}}</b>
						<a id="t{{y.id}}" href="#t{{y.id}}" onClick="location.href='#t{{y.id}}'"></a><br/>
				{% else %}
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_tools, 't');">&nbsp;{{y.name}}
						<a id="t{{y.id}}" href="#t{{y.id}}" onClick="location.href='#t{{y.id}}'"></a><br/>
				{% endif %}
				{% endfor %}
				{% endif %}
				{% endfor %}
				  </div>
				</div>
				<br/>

				<div style="position:relative;left:5px;top:5px;display:none">
					<b>Tags</b> <br/><br/>
					<div id="_tags">
				{% for x in skts %}
				{% if x.category.id == category.id %}
				{% for y in x.tags %}
						<input type="checkbox" value="{{y.id}}" name="new_tags"
							   {% if y.id in old_tags %}
				checked ="true"
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_tags,'');"><b>{{y.name}}</b><br/>
				{% else %}
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_tags,'');">{{y.name}}<br/>
				{% endif %}
				{% endfor %}
				{% endif %}
				{% endfor %}
					</div>
				</div>
			</div>
</td></tr>
</table>
</div>
<div id="content" style="position:absolute; left:0px; top:330; width:610px; height:relative; background-color: #1A1A1A; layer-background-color: #1A1A1A; border: 1px none #000000;">

<table width="400" align="left">
					<tr>
						<th></th>
                        <th>Name</th>
						<th>Job title</th>
                      <th align="center">View profile</th>

					</tr>
			{% for artist in artists %}
					<tr>
                    <td style="text-align: left">
						<input id="button{{artist.id}}" type="button" value="Add" type="button" 
							onclick="add({{artist.id}},'{{artist.last_name}}, {{artist.first_name}}');"/>
					</td>
					<td style="text-align: left">{{artist.last_name}}, {{artist.first_name}}</td>
					<td style="text-align: left">{{artist.get_profile.role}}</td>
                    <td style="text-align: center"><a href="/user/{{artist.id}}/" title="View profile"><img src="/site_media/img/people.gif"> </a></td>
					</tr>
			{% endfor %}
            <!--tr>
                    	<td colspan="4"><button onClick="select_artist();">Import artists</button></td>
          </tr-->
  </table>
            
          <span style="text-align: center"></span> </div>
		</div>
	</body>
</html>